<template>
  <el-card>
    <!-- 1.0 项目列表 -->
    <div>
      <h4>{{ $route.query.subject }}阶段项目展示</h4>
      <!-- 1.1 阶段项目 -->
      <div class="pro-list">
        <div class="card-item">
          <router-link to="/prolist">
            <img src="../../assets/images/java.png" alt="" />
            <h3>一阶段项目库</h3>
          </router-link>
        </div>
        <div class="card-item">
          <router-link to="/prolist">
            <img src="../../assets/images/java.png" alt="" />
            <h3>二阶段项目库</h3>
          </router-link>
        </div>
        <div class="card-item">
          <router-link to="/prolist">
            <img src="../../assets/images/java.png" alt="" />
            <h3>三阶段项目库</h3>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 1.2 学员作品展示和资源 -->
    <div>
      <h4>学员作品展示和资源</h4>
      <!-- 1.1 阶段项目 -->
      <div class="pro-list">
        <div class="card-item">
          <router-link to="/prolist">
            <img src="../../assets/images/js.png" alt="" />
            <h3>学员作品展示</h3>
          </router-link>
        </div>
        <div class="card-item">
          <router-link to="/prolist">
            <img src="../../assets/images/js.png" alt="" />
            <h3>静态资源库</h3>
          </router-link>
        </div>
        <div class="card-item">
          <router-link to="/prolist">
            <img src="../../assets/images/js.png" alt="" />
            <h3>vue界面资源库</h3>
          </router-link>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.pro-list {
  display: flex;

  .card-item {
    width: 220px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-left: 20px;
    overflow: hidden;

    h3 {
      padding: 0 20px;
      cursor: pointer;
    }

    img {
      width: 100%;
    }
  }
}
</style>
